<template>
  <div id="FormDialog">
    <el-row>
      <el-col :span="24" class="margin_col">
        <div class="always_handerOne">
          <div class="always_hander"></div>
          <div class="always_title">
            {{ title ? `${title}` : "工器具管理" }}
          </div>
        </div>
      </el-col>
      <el-col :span="24" class="margin_col">
        <div class="always_handerOne1">
          <el-collapse  v-model="activeNames">
            <el-collapse-item name="1">
              <template slot="title">
                <div class="always_title1">
                  <div></div>
                  三列基本信息
                </div>
              </template>
              <!-- <el-card class="card-item" shadow="always"> -->
                <!-- <h3 style="font-weight: bold; font-size: 15px">{{ title }}</h3> -->
                <el-form
                  :model="formData"
                  ref="vForm"
                  :rules="rules"
                  label-position="center"
                  label-width="120px"
                  ::size="medium"
                  :placeholder="placeholder"
                  style="display: flex; justify-content: flex-start;"
                >
                  <el-form-item
                    label="工程项目"
                    prop="projectName"
                    class="required"
                  >
                    <el-input
                      v-model="formData.projectName"
                      type="text"
                      clearable
                      :size="medium"
                      :placeholder="placeholder"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="类别" prop="sort">
                    <el-select
                      v-model="formData.sort"
                      class="full-width-input"
                      clearable
                      :size="medium"
                      :placeholder="placeholder1"
                    >
                      <el-option
                        v-for="(item, index) in SORTOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="批次编号" prop="batchCode">
                    <el-input
                      v-model="formData.batchCode"
                      type="text"
                      clearable
                      :size="medium"
                      :placeholder="placeholder"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="名称" prop="toolName">
                    <el-input
                      v-model="formData.toolName"
                      type="text"
                      clearable
                      :size="medium"
                      :placeholder="placeholder"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="型号" prop="type" class="required">
                    <el-input
                      v-model="formData.type"
                      type="text"
                      clearable
                      :size="medium"
                      :placeholder="placeholder"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="制造厂家"
                    prop="factory"
                    class="required"
                  >
                    <el-input
                      v-model="formData.factory"
                      type="text"
                      clearable
                      :size="medium"
                      :placeholder="placeholder"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="保管负责人" prop="custodyPerson">
                    <el-input
                      v-model="formData.custodyPerson"
                      type="text"
                      clearable
                      :size="medium"
                      :placeholder="placeholder"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="开始使用时间" prop="startTime">
                    <el-date-picker
                      v-model="formData.startTime"
                      type="date"
                      class="full-width-input"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      clearable
                      :size="medium"
                      :placeholder="placeholder2"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="有效时间" prop="endTime">
                    <el-date-picker
                      v-model="formData.endTime"
                      type="date"
                      class="full-width-input"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      clearable
                      :size="medium"
                      :placeholder="placeholder2"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="管理责任人" prop="managePerson">
                    <el-input
                      v-model="formData.managePerson"
                      type="text"
                      clearable
                      :size="medium"
                      :placeholder="placeholder"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="检验结果" prop="results">
                    <el-input
                      v-model="formData.results"
                      type="text"
                      clearable
                      :size="medium"
                      :placeholder="placeholder"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="检验日期" prop="inspectDate">
                    <el-date-picker
                      v-model="formData.inspectDate"
                      type="date"
                      class="full-width-input"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      clearable
                      :size="medium"
                      :placeholder="placeholder2"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="下次检验时间" prop="nextInspectDate">
                    <el-date-picker
                      v-model="formData.nextInspectDate"
                      type="date"
                      class="full-width-input"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      clearable
                      :size="medium"
                      :placeholder="placeholder2"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="备注" prop="remark">
                    <el-input
                      v-model="formData.remark"
                      type="text"
                      clearable
                      :size="medium"
                      :placeholder="placeholder"
                    ></el-input>
                  </el-form-item>
                </el-form>
              <!-- </el-card> -->
            </el-collapse-item>
            <el-collapse-item name="2">
              <template slot="title">
                <div class="always_title1">
                  <div></div>
                  两列基本信息
                </div>
              </template>
              <!-- <el-card class="card-item" shadow="always"> -->
                <!-- <h3 style="font-weight: bold; font-size: 15px">{{ title }}</h3> -->
                <el-form
                  :model="formData"
                  ref="vForm"
                  :rules="rules"
                  label-position="center"
                  label-width="120px"
                  :size="medium"
                  class="el_formContent"
                >
                  <el-row>
                    <el-col :span="24" class="el_col">
                      <el-form-item
                        label="工程项目"
                        prop="projectName"
                        class="required"
                      >
                        <el-input
                          v-model="formData.projectName"
                          type="text"
                          clearable
                          :size="medium"
                          :placeholder="placeholder"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="类别" prop="sort">
                        <el-select
                          v-model="formData.sort"
                          class="full-width-input"
                          clearable
                          :size="medium"
                          :placeholder="placeholder1"
                        >
                          <el-option
                            v-for="(item, index) in SORTOptions"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" class="el_col">
                      <el-form-item label="批次编号" prop="batchCode">
                        <el-input
                          v-model="formData.batchCode"
                          type="text"
                          clearable
                          :size="medium"
                          :placeholder="placeholder"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="名称" prop="toolName">
                        <el-input
                          v-model="formData.toolName"
                          type="text"
                          clearable
                          :size="medium"
                          :placeholder="placeholder"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" class="el_col">
                      <el-form-item label="型号" prop="type" class="required">
                        <el-input
                          v-model="formData.type"
                          type="text"
                          clearable
                          :size="medium"
                          :placeholder="placeholder"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="制造厂家"
                        prop="factory"
                        class="required"
                      >
                        <el-input
                          v-model="formData.factory"
                          type="text"
                          clearable
                          :size="medium"
                          :placeholder="placeholder"
                        ></el-input> </el-form-item
                    ></el-col>
                    <el-col :span="24" class="el_col">
                      <el-form-item label="保管负责人" prop="custodyPerson">
                        <el-input
                          v-model="formData.custodyPerson"
                          type="text"
                          clearable
                          :size="medium"
                          :placeholder="placeholder"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="开始使用时间" prop="startTime">
                        <el-date-picker
                          v-model="formData.startTime"
                          type="date"
                          class="full-width-input"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          clearable
                          :size="medium"
                          :placeholder="placeholder2"
                        ></el-date-picker> </el-form-item
                    ></el-col>
                    <el-col :span="24" class="el_col">
                      <el-form-item label="有效时间" prop="endTime">
                        <el-date-picker
                          v-model="formData.endTime"
                          type="date"
                          class="full-width-input"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          clearable
                          :size="medium"
                          :placeholder="placeholder2"
                        ></el-date-picker>
                      </el-form-item>
                      <el-form-item label="管理责任人" prop="managePerson">
                        <el-input
                          v-model="formData.managePerson"
                          type="text"
                          clearable
                          :size="medium"
                          :placeholder="placeholder"
                        ></el-input> </el-form-item
                    ></el-col>
                    <el-col :span="24" class="el_col">
                      <el-form-item label="检验结果" prop="results">
                        <el-input
                          v-model="formData.results"
                          type="text"
                          clearable
                          :size="medium"
                          :placeholder="placeholder"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="检验日期" prop="inspectDate">
                        <el-date-picker
                          v-model="formData.inspectDate"
                          type="date"
                          class="full-width-input"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          clearable
                          :size="medium"
                          :placeholder="placeholder2"
                        ></el-date-picker> </el-form-item
                    ></el-col>
                    <el-col :span="24" class="el_col">
                      <!-- <el-form-item label="下次检验时间" prop="nextInspectDate">
                        <el-date-picker
                          v-model="formData.nextInspectDate"
                          type="date"
                          class="full-width-input"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          clearable
                          :size="medium"
                        ></el-date-picker>
                      </el-form-item> -->
                      <el-form-item label="备注" prop="remark" style="width: 100%;">
                        <!-- <el-input
                          v-model="formData.remark"
                          type="text"
                          clearable
                          :size="medium"
                        ></el-input>  -->
                        <el-input
                            type="textarea"
                            :rows="2"
                            :placeholder="placeholder"
                            v-model="formData.remark">
                        </el-input>
                        </el-form-item
                    ></el-col>
                  </el-row>
                </el-form>
              <!-- </el-card> -->
            </el-collapse-item>
            <el-collapse-item name="3">
              <template slot="title">
                <div class="always_title1">
                  <div></div>
                  附加信息
                </div>
              </template>
              <el-card class="card-item">
                <el-upload
                  style="position: relative;"
                  action="http://localhost:8080/"
                  :on-success="handleSuccess"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  multiple
                  :file-list="fileList"
                  :show-file-list="false"
                >
                <div style="font-weight: 700; font-size: 15px;display: block; float: left;">附件信息</div>
                  <div style="position: absolute;top: -5px;right: 0px;">
                    <el-button style="color: #0f8bf9; border-color: #0f8bf9;" plain  icon="el-icon-upload2">文件上传</el-button>
                    <el-button @click="deleteSelectedRows" style="color: #0f8bf9;width:98px; border-color: #0f8bf9; width: 97px;" plain  icon="el-icon-delete">删除</el-button>
                  </div>
                </el-upload>
                <el-table :data="tableData" border  @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="40">
                  </el-table-column>
                  <el-table-column prop="name" label="文件名">
                    <template slot-scope="{ row }">
                      <el-link :href="row.url" target="_blank">{{row.name}}</el-link>
                    </template>
                  </el-table-column>
                  <el-table-column prop="size" label="大小"></el-table-column>
                  <el-table-column prop="loginName" label="创建人">
                  </el-table-column>
                  <el-table-column prop="loginDate" label="创建时间">
                  </el-table-column>
                  <el-table-column prop="size" label="操作">
                    <template slot-scope="{ row }">
                      <el-button @click="beforeRemoves(row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
      <el-col :span="24" class="margin_col">
        <div class="always_handerOne1">
          <custom-buttons
            @back="handleBack"
            @confirm="handleConfirm"
          ></custom-buttons>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  listManger,
  getManger,
  delManger,
  addManger,
  updateManger,
} from "@/api/system/manger";
import CustomButtons from "@/components/CustomButton/CustomButton.vue";
export default {
  components: { CustomButtons },
  props: {},
  data() {
    return {
      // placeholder提示内容
      placeholder: "请输入内容",
      placeholder1: "请选择内容",
      placeholder2: "请选择时间",
      //输入框的大小
      medium:"small",
      activeNames: ['1', '2', '3'] ,
      fileList: [],
      tableData: [],
      selectedRows:[],
      formData: {},
      title: "",
      rules: {
        ID: [{ required: true, message: "主键id不能为空", trigger: "change" }],
        refId: [{ required: true, message: "外键不能为空", trigger: "change" }],
        projectId: [
          { required: true, message: "项目id不能为空", trigger: "change" },
        ],
        projectName: [
          { required: true, message: "项目名称不能为空", trigger: "change" },
        ],
        sort: [{ required: true, message: "类别不能为空", trigger: "change" }],
        batchCode: [
          { required: true, message: "批次编号不能为空", trigger: "change" },
        ],
        toolName: [
          { required: true, message: "器具名称不能为空", trigger: "change" },
        ],
        kindNumber: [
          { required: true, message: "种类序列号不能为空", trigger: "change" },
        ],
        type: [{ required: true, message: "型号不能为空", trigger: "change" }],
        factory: [
          { required: true, message: "制造厂家不能为空", trigger: "change" },
        ],
        custodyPerson: [
          { required: true, message: "保管负责人不能为空", trigger: "change" },
        ],
        startTime: [
          { required: true, message: "开始时间不能为空", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "结束时间不能为空", trigger: "change" },
        ],
        managePerson: [
          { required: true, message: "管理责任人不能为空", trigger: "change" },
        ],
        RESULTS: [
          { required: true, message: "检验结果不能为空", trigger: "change" },
        ],
        inspectDate: [
          { required: true, message: "检验日期不能为空", trigger: "change" },
        ],
        nextInspectDate: [
          { required: true, message: "下次检验日期不能为空", trigger: "change" },
        ],
        REMARK: [{ required: true, message: "备注不能为空", trigger: "change" }],
        FILE: [
          { required: true, message: "附件信息不能为空", trigger: "change" },
        ],
      },
      SORTOptions: [
        {
          label: "电力安全工器具",
          value: "1",
        },
        {
          label: "个人安全防护用品",
          value: 2,
        },
        {
          label: "仪器仪表",
          value: 3,
        },
      ],
      FILEFileList: [],
      FILEUploadHeaders: {},
      FILEUploadData: {},
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getTitle();
    this.handleUpdate();
  },
  mounted() {},
  methods: {
    getTitle() {
      const { ID, title } = this.$route.query;
    //  console.log(ID, title);
      this.title = title;
    },
    handleBack() {
     // console.log("Back button clicked!");
      window.history.back();
      // 执行返回逻辑
    },
    handleConfirm() {
      this.$refs["vForm"].validate((valid) => {
        if (valid) {
          // this.buttonLoading = true;
         // console.log(this.tableData)
          debugger
          if (this.formData.id !== undefined) {
            updateManger(this.formData)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
              })
              .finally(() => {
                this.$router.push("/Admission/pageView");
                // this.buttonLoading = false
                this.$refs.formData.resetFields(); // 重置表单数据
                this.reset();
              });
          } else {
            addManger(this.formData)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
              })
              .finally(() => {
                // this.buttonLoading = false;
                this.$refs.vForm.resetFields(); // 重置表单数据
                this.$router.push("/Admission/pageView");
                this.reset();
              });
          }
        }
      });
    },
    reset() {
      this.formData = {
        refId: undefined,
        projectId: undefined,
        projectName: undefined,
        SORT: undefined,
        batchCode: undefined,
        toolName: undefined,
        kindNumber: undefined,
        TYPE: undefined,
        FACTORY: undefined,
        custodyPerson: undefined,
        startTime: undefined,
        endTime: undefined,
        managePerson: undefined,
        RESULTS: undefined,
        inspectDate: undefined,
        nextInspectDate: undefined,
        REMARK: undefined,
        FILE: undefined,
      };
    },
    submitForm() {},
    handleUpdate() {
      const { ID } = this.$route.query;
      this.reset();
      if (this.$route.query.flowId == 1) {
        getManger(ID).then((response) => {
         // console.log(response.data);
          this.loading = false;
          this.formData = response.data;
        });
      }
    },
    resetForm() {
      this.$refs["vForm"].resetFields();
    },
    handleSuccess(response, file, fileList) {
      const username = this.$store.state.user.name;
      //console.log(username);
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');

      const currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      //console.log(currentTime);
      // 文件上传成功后，将文件信息添加到表格数据中
      this.fileList = fileList;
      this.tableData.push({
        name: file.name,
        size: (file.size / 1024).toFixed(2) + "KB",
        url: URL.createObjectURL(file.raw),
        uid: file.uid,
        loginName:username,
        loginDate:currentTime
      });
    },
    handlePreview(file) {
      //console.log("预览文件：", file);
    },
    handleRemove(file, fileList) {
      // 文件删除时，同时从表格数据中删除对应的文件信息
      this.fileList = fileList.filter(item => {
      return this.tableData.some(data => data.name === item.name);
    });
      this.tableData = this.tableData.filter((item) => item.name !== file.name);
      //console.log(this.fileList)
    },
    beforeRemoves(row) {
      this.$confirm(`确定移除 ${row.name}？`).then(()=>{
        const index = this.tableData.indexOf(row);
        if (index !== -1) {
          this.fileList.splice(index, 1);
        }
        this.handleRemove(row, this.fileList);
      }).catch(()=>{

      })
    },
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    deleteSelectedRows(event) {
      event.stopPropagation();
      this.$confirm(`确定移除 ？`).then(()=>{
        this.selectedRows.forEach(row => {
          const index = this.tableData.indexOf(row);
          if (index !== -1) {
            this.tableData.splice(index, 1);
            this.fileList.splice(index, 1);
          }
        });
        this.selectedRows = [];
      }).catch(()=>{

      })
      //console.log(this.fileList)
    }
  },
};
</script>

<style lang="scss" scoped>
.el_col {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
}
.card-container {
  height: 80%; /* 设置容器的高度为 100% */
  display: flex;
  flex-direction: column;
}
.card-item {
  flex: 1; /* 平分容器的宽度 */
}
#FormDialog {
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
// .dialog-footer1 {
//   width: 100%;
//   height: 6vh;
//   background: #ffffff;
//   text-align: center;
//   line-height: 6vh;
// }
.el-card {
  margin-top: 10px;
}
.el-select {
  width: 100%;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.el-form-item {
  width: 30%;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.el-form-item {
  margin-bottom: 11px;
}
.el-table {
  min-height: 50% !important;
}
.always_handerOne {
  height: 80px;
  background-color: #ffffff;
  // border-radius: 14px;
}
.always_handerOne1 {
  height: auto;
  background-color: #ffffff;
  // border-radius: 14px;
  padding: 20px;
}
.always_title {
  font-size: 20px;
  font-weight: bold;
  line-height: 53px;
  margin-left: 30px;
}
.always_title1 {
  font-size: 18px;
  font-weight: bold;
  // line-height: 53px;
  margin-left: 15px;
  position: relative;
}
.always_title1 ::before {
  content: "|";
  flex-shrink: 0;
  width: 4px;
  height: 6%;
  margin-left: 12px;
  // background: #f90;
  color: #f90;
  position: absolute;
  left: -22px;
  margin-bottom: 12px;
}
.always_hander {
  background: url(../../../assets/images/header0.png);
  height: 20px;
  width: 100%;
}
// .margin_col {
//   margin-bottom: 20px;
// }
.el_formContent  .el-form-item{
  width: 50%;
  margin-bottom: 17px;
}
</style>
